<template>
  <div
    meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
  >
    <div>
      <table>
        <!--第一行 返回按钮 和 订单详情-->
        <tr class="O_head">
          <td >
            <button id="back" @click="back">返回</button>
          </td>
          <td><font face="微软雅黑">订单详情</font></td>
        </tr>

        <!--第二行 姓名、电话-->
        <tr class="O_NNT">
          <hr/>
          <td align="left">
            <font size="3" color="black">{{ detail[0].oname }}</font>
          </td>
          <td align="left">
            <font size="3" color="black">{{ detail[0].ophone }}</font>
          </td>
        </tr>

        <!--第三行 地址-->
        <tr class="O_local">
          <td width="100%">
            <font color="gray">{{ detail[0].oaddress }}</font>
          </td>
          <hr/>
        </tr>

        <hr/>
      </table>
    </div>

    <!--店铺名称-->
    <div class="O_shopname">
      <font size="4" color="black" align="left">{{mname}}</font>
    </div>

    <!--商品图片 名称 价格 -->
    <div class="O_good">
      <br/>
      <img :src="detail[0].gimg" width="80px" height="80px" align="left">
      <br/>
      <font style="margin-left: 10px" size="3" color="black">{{
        detail[0].gname
        }}</font>
      <br/><br/>
      <font style="float: right" size="3" color="red"
      >￥{{ detail[0].price }}</font
      ><br/>
      <font style="float: right" size="3" color="black">x1</font><br/>
    </div>

    <!--订单编号-->
    <div class="O_message">
      <font size="3" color="black"
      >订单编号:<br/>{{ detail[0].orderNumber }}</font
      ><br/>
    </div>

    <!--下单时间-->
    <div class="O_btime">
      <font size="3" color="black">下单时间:{{ detail[0].time }}</font
      ><br/>
    </div>
  </div>
</template>
<script>
  import {findMerchantName, selectOrderDetail} from '@/api/user'

  export default {

    name: 'OrderDetail',
    data () {
      return {
        //所需要的参数，从后台获取 (目前前台调用时会出现 Cannot read property 'oname' of undefined" 错误)
        detail: [{}],
        mname:'',
      }
    },
    methods: {
      orderDetail () {
        selectOrderDetail({
          orderNumber: this.$route.query.orderNumber,
          uid: this.$store.state.user.uid //从本地store中获取uid
        }).then((res) => {
          this.detail = res.data.data
        })
      },
      //查询商家名
      findMerchantNameByMid(){
        findMerchantName({
          mid:this.$route.query.mid,
        }).then(res=>{
          this.mname=res.data.data //为商家名赋值
        }).catch(res=>{
          alert("出错了，请重试")
        })
      },
      //返回
      back(){
        this.$router.replace('/OrderNavigation/UserOrder')
      }
    },

    created () {
      //创建成功后调用orderDetail方法从后台获取订单详细信息
      this.orderDetail();
      //查询商家名
      this.findMerchantNameByMid();
    },
  }
</script>

<style scoped>
  /*返回按钮*/
  #back{
    width: 100%;
  }
  .O_head {
    position: absolute;
    top: 0px;
    width: 300px;
  }

  .O_NNT {
    position: absolute;
    top: 65px;
    width: 300px;
    left: 20px;
  }

  .O_local {
    position: absolute;
    top: 110px;
    width: 300px;
    left: 15px;
  }

  .O_shopname {
    position: absolute;
    top: 210px;
  }

  .O_good {
    position: absolute;
    top: 255px;
    width: 320px;
    height: 160px;
    border-radius: 10px;
    background-color: rgb(242, 242, 242);
  }

  .O_message {
    position: absolute;
    top: 440px;
    letter-spacing: 4px;
  }

  .O_btime {
    position: absolute;
    top: 500px;
    letter-spacing: 4px;
  }
</style>
